<template>
	<view class="userdata">
		<u-navbar
			title="业绩查询"
			:back-icon-size="28"
			back-icon-color="#000000"
			:title-size="28"
			:border-bottom="false"
			:back-text-style="{ color: '#000000', fontSize: '26rpx' }"
			title-color="#000000"
		></u-navbar>
		<view class="topbtn">
			<u-button plain :custom-style="btnsty" @click="getuserdata(1, 1)">本月预估</u-button>
			<u-button plain :custom-style="btnsty" @click="getuserdata(1, 2)">本月结算</u-button>
			<u-button plain :custom-style="btnsty" @click="getuserdata(2, 1)">上月预估</u-button>
			<u-button plain :custom-style="btnsty" @click="getuserdata(2, 2)">上月结算</u-button>
		</view>
		<view class="u-m-l-30 u-m-t-14 u-m-b-14" style="color: #787882;">数据总计:  {{ price }}</view>
		<view class="dataul" v-if="dataList.length">
			<block v-for="(v, k) in dataList" :key="k">
				<view class="datali">
					<text>{{ v.addDate }}</text>
					<text>{{ v.price }}</text>
				</view>
			</block>
		</view>
		<u-empty v-else text="Sorry,暂无数据" mode="data" :margin-top="40"></u-empty>
	</view>
</template>

<script>
export default {
	name: 'haha',
	data() {
		return {
			btnsty: {
				width: '152rpx',
				height: '58rpx'
				// backgroundColor:''
			},
			index: '',
			price: '145445',
			dataList: [
				// {
				// 	addDate: '2020',
				// 	price: 5415152
				// }
			]
		};
	},
	//实例创建完成后被立即调用
	created() {},
	onLoad(option) {
		this.index = option.index;
		// console.log(this.index);
		switch (this.index) {
			case '1':
				this.getuserdata(1, 1);
				break;
			case '2':
				this.getuserdata(1, 2);
				break;
			case '3':
				this.getuserdata(2, 1);
				break;
			case '4':
				this.getuserdata(2, 2);
				break;
			default:
				break;
		}
	},
	//挂载开始之前被调用
	beforeMount() {},
	onPullDownRefresh() {
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		console.log('refresh');
		setTimeout(function() {
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 1000);
	},
	//初次渲染完成
	onReady() {},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {},
	//前台进入后台
	onHide() {},
	methods: {
		getuserdata(type, status) {
			this.$u.api
				.getuserdata({
					type: type,
					status: status
				})
				.then(res => {
					console.log(res);
					if (res.code == 200) {
						this.price = res.data.price;
						this.dataList = res.data.data;
					}
				})
				.catch(err => {
					console.log(err);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.userdata {
	background-color: $lt-bg;
	min-height: 100vh;
	.topbtn {
		width: 688rpx;
		height: 78rpx;
		margin: 0 auto;
		background-color: #dfdfdf;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-radius: 12rpx;
		padding: 0 8rpx;
	}
	.dataul {
		width: 686rpx;
		min-height: 1314rpx;
		margin: 0 auto;
		flex: 1;
		background-color: #ffffff;
		border-radius: 12rpx;
		.datali {
			width: 636rpx;
			margin: 0 auto;
			height: 76rpx;
			line-height: 76rpx;
			border-bottom: 2rpx solid #f7f7f7;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
}
</style>
